<template>
  <div class="body-background">
    <a-flex vertical>
      <Header />
      <router-view></router-view>
    </a-flex>
  </div>
</template>

<script setup lang="ts">
import Header from "@/components/Header.vue";
import { onMounted, ref } from "vue";

const bodyHeight = ref<number>(0);

onMounted(() => {
  updateContentHeight();
  window.addEventListener("resize", () => {
    if (bodyHeight.value != document.body.clientHeight) {
      updateContentHeight();
    }
  });
});

function updateContentHeight() {
  bodyHeight.value = document.body.clientHeight;
  document.documentElement.style.setProperty(
    "--content-height",
    `${bodyHeight.value - 48}px`
  );
}
</script>

<style>
.body-background {
  position: fixed;
  width: 100%;
  height: 100%;
  background-image: url(@/assets/background.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: rgb(219, 219, 223);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}
</style>
